<template>
    <view :style="{'--color': color}">
        <status-bar title='添加素材'></status-bar>
        <view class="main padding40-30">
            <view class="d-flex a-center m-bot40">
                <view class="title size30">分类</view>
                <picker class="flex-1" mode="selector" :range="cateList" range-key="website_list_title" @change="handleChange">
                    <u-input v-model="cateName" readonly placeholder="请选择分类">
                        <u-icon slot="suffix" name="arrow-down"></u-icon>
                    </u-input>
                </picker>
            </view>
            <view class="d-flex m-bot40">
                <view class="title size30 p-t-9">素材内容</view>
                <u-textarea v-model="queryParams.info" placeholder="请输入内容" height="150" maxlength="-1"></u-textarea>
            </view>
            <view class="d-flex m-bot40">
                <view class="title size30 p-t-9">素材图集</view>
                <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="30"></u-upload>
            </view>
            <view class="d-flex a-center">
                <view class="title size30">关联产品</view>
                <view class="m-right20">
                    <u-button type="primary" size="small" text="选择" @click="showPop = true"></u-button>
                </view>
                <view class="size28 color_68" v-if="checkedList.length">已选择{{ checkedList.length }}个商品</view>
            </view>
            <view class="btn thmeBg size32 white t-letter4 flexac" @click="handleSubmit">确定添加</view>
        </view>

        <u-popup :show="showPop" mode="bottom" @close="showPop = false">
            <view class="botPop d-flex f-column">
                <view class="d-flex a-center padding30">
                    <view class="flex-1 size30 color_33 bold">已选关联产品( {{ checkedList.length }} )个</view>    
                    <view class="m-right10"><u-button size="small" text="重置" @click="handleReset"></u-button></view>
                    <view><u-button type="primary" size="small" text="确定" @click="showPop = false"></u-button></view>
                </view>
                <checkbox-group class="list flex-1" @change="handleCheck">
                    <block v-for="(item,index) in allList" :key="index">
                        <view v-if="item.goods && item.goods.length">
                            <view class="name size32 bold300 t-letter4 bgwhite">{{ item.classify_name }}</view>
                            <label class="good d-flex a-center" v-for="(itm,idx) in item.goods" :key="idx">
                                <image :src="$imgUrls(itm.img)" mode="aspectFill" class="img"></image>
                                <view class="flex-1 p-left20 p-right20">
                                    <view class="size28 ellipsis m-bot10">{{ itm.name }}</view>
                                    <view class="size32 color_FOD">￥{{ itm.price }}</view>
                                </view>
                                <checkbox :value="itm.goods_id" :color="color" style="transform:scale(0.8)"
                                    :checked="checkedList.includes(itm.goods_id)" />
                            </label>
                        </view>
                    </block>
                </checkbox-group>
            </view>
        </u-popup>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            cateList: [],
            cateName: '',
            fileList: [],
            allList: [],
            queryParams: {
                list_id: '',
                info: '',
                goods_ids: ''
            },
            showPop: false,
            checkedList: []
        }
    },
    computed: {
	    ...mapState(['bid', 'color'])
    },
    onLoad() {
        this.getCate()
        this.getList()
    },
    methods: {
        getCate(){
            this.$http.get({
                url: '/PrivateSphereApi/getResource',
                data: {
                    type: 'material'
                }
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                this.cateList = res.data || []
            })
        },
        getList(){
            this.$http.get({
                url: '/singleSaleApi/allUpList',
                data: {
                    show_goods: 1
                }
            }).then(res=>{
                if(res.errcode != 100) return this.$Toast(res.msg)
                this.allList = res.data || []
            })
        },
        handleChange(e){
            let current = this.cateList[e.detail.value]
            this.cateName = current.website_list_title
            this.queryParams.list_id = current.website_list_id
        },
        async afterRead(e){
            let lists = [].concat(e.file)
            let fileListLen = this.fileList.length
            lists.map(item=>{ // 临时显示
                this.fileList.push({...item, status: 'uploading', message: '上传中'})
            })
            for(let i = 0; i < lists.length; i++){
                const res = await this.$common.uploadFile('/zzjApp/uploade?bid=' + this.bid, lists[i].url) // 调接口
                if(res.errcode != 100) return this.$Toast('上传失败')
                let item = this.fileList[fileListLen]
                let url = this.$imgUrls(res.url.substring(23)) // 截取掉'/data/sswl/public_html/'
                this.fileList.splice(fileListLen, 1, Object.assign(item, {status: 'success', message: '', url}))
                fileListLen++
            }
        },
        deletePic(e){
            this.fileList.splice(e.index, 1)
        },
        handleCheck(e){
            console.log(e.detail.value) // 当前选中的value数组
            this.checkedList = e.detail.value
            this.queryParams.goods_ids = this.checkedList.toString()
        },
        handleReset(){
            this.checkedList = []
            this.queryParams.goods_ids = ''
        },
        handleSubmit(){
            if(!this.queryParams.list_id) return this.$Toast('请选择分类')
            if(!this.queryParams.info) return this.$Toast('内容不能为空')
            console.log(this.queryParams)
            this.$http.post({
                url: '/PrivateSphereApi/upPrivateArticle',
                data: {
                    ...this.queryParams,
                    atlas: this.fileList.map(item=>item.url).toString()
                }
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                this.$Toast('添加成功')
                setTimeout(()=>{
                    uni.navigateBack() // delta默认1
                },1000)
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.main {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
.title {
    width: 130rpx;
    text-align-last: justify;
    color: #949495;
    margin-right: 30rpx;
    &.p-t-9 {
        padding-top: 9px;
    }
}
.btn {
    width: 400rpx;
    height: 80rpx;
    border-radius: 40rpx;
    margin: 100rpx auto;
}
.botPop {
    height: 60vh;
    .list {
        overflow-y: auto;
        padding: 0 40rpx;
        .name {
            padding: 10rpx 0;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        .good {
            padding: 20rpx 0;
            border-bottom: 1rpx solid #e9e9e9;
            &:last-child {
                border: none;
            }
            .img {
                width: 100rpx;
                height: 100rpx;
            }
        }
    }
}
</style>